<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 {
            width: 200px;
            height: 100px;
            background: papayawhip;
        }

        .div2 {
            color: #333;
            text-decoration: underline;
            font-size: 25pt;
        }
    </style>

</head>
<body>
<div id="div1">
    <div :class="{div1:isDiv1,div2:isDiv2}">123</div>
    <div :class="cls">123</div>
    <div :style="style"></div>

    <div style="width: 500px"></div>
    <input type="button" value="提交" @click.once="handlerSubmit($event)">
    <input type="button" value="+1" @click="handlerClick">
    <input type="button" value="+2" @click="handlerClick">
    <input type="button" value="+3" @click="handlerClick">
</div>
<script src="js/vue.js"></script>
<script>
    const d1 = true, d2 = false
    new Vue({
        el: '#div1',
        data: {
            div1: 'div1',
            div2: 'div2',
            isDiv1: d1,
            isDiv2: d1,
            cls: {
                'div1': d1,
                'div2': d1
            },
            style: {
                width: "500px",
                height: "300px",
                background: 'yellow'
            }
        },
        computed: {},
        filters: {},
        watch: {},
        created() {
        },
        mounted() {
        },
        beforeDestroy() {
        },
        methods: {
            handlerSubmit(){
                console.log(123)
            },
            handlerClick(event){
                console.log(event.target.value)
            }
        }
    })
</script>
</body>
</html>